<template>
  <el-dialog v-bind="dialog" :visible.sync="dialog.visible" @open="dialogOpen">
    <el-select v-model="dataPermission" size="small" placeholder="请选择数据权限" @change="selectChange">
      <el-option v-for="item in optionList" :key="item.value" v-bind="item" />
    </el-select>
    <el-tree v-show="dataPermission === 3" :data="treeData" v-bind="tree" @check="treeCheck" />
    <el-button slot="footer" size="small" type="primary" @click="submit">确 认</el-button>
  </el-dialog>
</template>

<script>
import { internetApi } from '@/api/api'

export default {
  props: {
    tableUpdate: Function
  },
  data() {
    return {
      //弹窗相关的属性
      dialog: {
        visible: false,
        title: '数据权限',
        width: '90%',
        closeOnClickModal: false
      },
      treeList: [],
      treeData: [],
      tree: {
        props: {
          children: 'children',
          label: 'name'
        },
        showCheckbox: true,
        nodeKey: 'id',
        ref: 'tree',
        defaultExpandedKeys: []
      },
      roleId: null, //角色id
      deptIdList: [], //菜单列表权限id
      dataPermission: null, //数据权限类型
      //下拉选择框的数据
      optionList: [
        { label: '本人数据权限', value: 1 },
        { label: '本部门数据权限', value: 2 },
        { label: '自定义数据权限', value: 3 }
      ]
    }
  },
  mounted() {},

  methods: {
    selectChange(e) {
      if (e === 3) {
        //自定义数据权限时，获取组织架构
        this.getDeptList()
      }
      this.deptIdList = []
      this.$refs.tree.setCheckedKeys([])
    },
    //树节点选中变化时
    treeCheck(vnode, { checkedKeys, halfCheckedKeys }) {
      const ids = halfCheckedKeys.concat(checkedKeys)
      this.deptIdList = ids
    },
    //提交
    async submit() {
      const { deptIdList, roleId, dataPermission } = this
      await this.$request(internetApi.addRoleDataPermission, {
        roleId,
        deptIdList,
        dataPermission
      })
      this.dialog.visible = false
      this.tableUpdate(1)
      this.$message.success('操作成功')
    },

    //弹窗打开之前，获取所需数据
    async open(row) {
      this.roleId = row.id
      this.dataPermission = row.dataPermission
      if (row.dataPermission === 3) {
        await Promise.all([this.getDeptList(), this.getRoleDataPermission()])
      }
      this.dialog.visible = true
    },
    //弹窗打开
    async dialogOpen() {
      //如果是自定义数据权限，则进行回填
      if (this.dataPermission === 3) {
        this.$nextTick(() => {
          //清空之前选中的
          this.$refs.tree.setCheckedKeys([])
          //设置当前选中的菜单
          this.deptIdList.forEach((item) => {
            this.$refs.tree.setChecked(item, true)
          })
        })
      }
    },

    //获取当前角色已有的自定义数据权限
    async getRoleDataPermission() {
      const { data } = await this.$request(internetApi.getRoleDataPermission, {
        roleId: this.roleId
      })
      this.deptIdList = data
    },
    //获取组织架构列表
    async getDeptList() {
      //判断是否加载过组织列表，如果加载过，就不重复加载
      if (this.treeList.length === 0 && this.treeData.length === 0) {
        const { data } = await this.$request(internetApi.getDeptList)
        this.treeList = data
        // const rootId = data[0].parentId
        this.treeData = this.$utils.arrayToTree(data, { pid: 'parentId', rootId: 0 })
        this.tree.defaultExpandedKeys = this.treeData.map((item) => item.id)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__wrapper ::v-deep.el-dialog {
  max-width: 500px;
}
.el-select {
  display: block;
}
.el-tree {
  margin-top: 20px;
}
</style>
